<template>
    <div v-loading="loading">
      <div class="food">
      <e-container>
                <div style="margin:10px 0 0 0">
                  <div class="food-title">美食专区</div>
                  <div class="food-title2">SELECT YOUR FAVORITE FOOD</div>

                  <el-card>
                        <div class="info-header">
                            <span class="info-title">美食列表</span>
                        </div>
                        <form action="javascript:;" @submit="searchSubmit" class="form-search">
                            <table class="jd-search">
                                <tbody>
                                    <tr>
                                        <td>
                                            <p class="search-radio">
                                                <a href="javascript:;" @click="selectRadio('kind', '')"
                                                    :class="{ active: !search.kind }">全部</a>
                                                <a href="javascript:;" v-for="r in mapfoodkind5"
                                                    @click="selectRadio('kind', r.id)"
                                                    :class="{ active: search.kind == r.id }" v-text="r.name">
                                                </a>
                                                <el-input class="info-search-input" type="text" style="width: 250px"
                                                    v-model="search.name" placeholder="请输入关键词">
                                                </el-input>
                                                <el-button type="success" class="info-search-button"
                                                    @click="searchSubmit" icon="el-icon-search">
                                                </el-button>
                                            </p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                        <el-row :gutter="30">
                            <el-col v-for="r in list" :md="4" :key="r.id" style="margin-bottom: 20px">
                                <e-module-products :title="r.name" :price="r.price" :description="'附近景点：' + r.attractions"
                                    :image="r.photo" :image-height="100" :is-scale="true"
                                    :to="'/fooddetail?id=' + r.id">
                                </e-module-products>
                            </el-col>
                        </el-row>
                        <div style="margin-top: 10px;text-align: center">
                            <el-pagination @current-change="loadList" :current-page="page" :page-size="20"
                                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                            </el-pagination>
                        </div>
                    </el-card>
                </div>
            </e-container>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
.food {
  .el-card.is-always-shadow {
    margin-top: -18px;
  }

  .form-search {
    margin-bottom: 20px;

    .jd-search {
      border-top: 0;
      border-left: 0;
      width: 100%;
       margin: 0 auto; /* 左右自动居中 */

      td {
        border-right: 0;
        border-bottom: 3px solid #DEDEDE;
        padding: 10px;
      }

      p {
        margin: -9px 0 10px;
      }

      .search-radio {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 10px;

        a {
          display: inline-block;
          padding: 8px 10px;
          margin-right: 15px;
          border-radius: 5px;
        }

        a.active {
          background: #7fabbe;
          color: #ffffff;
        }
      }
    }

    .info-search-button {
      background-color: #7fabbe;
      border-color: #7fabbe;
      margin-left: 10px;
    }

    .info-search-input {
      flex: 1;
      margin-left: 10px;
    }
  }
    ::v-deep .v-module-products article .text .title{
      left: -26px;
    }
    ::v-deep .v-module-products article .text sup{
      color: #e66666;
      display: flex;
      left: 90px;
      top: -33px;
    }
    ::v-deep .v-module-products article .pro-btn.pro-btn-add{
      background: #7fabbe;
      color: #ffffff;
      //font-weight: bold;
      letter-spacing: 2px;
      right: -5px;
    }
    .info-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 5px;
      display: block;
      color: #fff;
    }


    .food-title {
        text-align: center;
        font-size: 25px;
        width: 100%;
    }
    .food-title2 {
        margin-bottom: 3%;
        color: #8c8c8c;
        text-align: center;
        font-size: 17px;
        width: 100%;
    }
}

</style>
<script>
import api from '@/api';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';


/**
 * 后台列表页面
 */
export default {
    data() {
        return {
            loading: false,
            list: [],
            search: {
                number: '',
                name: '',
                attractions: '',
                kind: '',
                photo: '',
                price_start: '',
                price_end: '',
                introduction: '',
                addtime: '',
            },
            page: 1, // 当前页
            pagesize: 12, // 页大小
            totalCount: 0, // 总行数
            total: {},
            mapfoodkind5: [],
        }
    },
    watch: {},
    computed: {},
    methods: {
      getShortDescription(description) {
        return description.length > 25 ? description.substring(0, 25) + '...' : description;
      },
      searchSubmit() {
            this.loadList(1);
            console.log(this.list);
        },
        loadList(page) {
            // 防止重新点加载列表
            if (this.loading) return;
            this.loading = true;
            this.page = page;
            // 筛选条件
            var filter = extend(true, {}, this.search, { page: page + "", pagesize: this.pagesize + "" });
            // 将筛选条件保存到Cookie
            this.saveFilterToCookie(filter);
            this.$post(api.food.weblist, filter).then(res => {
                this.loading = false;
                if (res.code == api.code.OK) {
                    console.log(res.data);
                    extend(this, res.data);
                } else {
                    this.$message.error(res.msg);
                }
            }).catch(err => {
                this.loading = false;
                this.$message.error(err.message);
            });
        },
        selectRadio(target, name) {
            console.log("selectRadio" + `target: ${target} name: ${name}`)
            this.search[target] = name;
            this.searchSubmit(1);
            console.log("mapfoodkind5" + this.mapfoodkind5);
        },
        saveFilterToCookie(filter) {
          // 将筛选条件转换为JSON字符串并保存到Cookie
          var filterStr = JSON.stringify(filter);
          document.cookie = `foodFilter=${filterStr}; path=/; max-age=3600`; // 设置1小时过期
      },
      getFilterFromCookie() {
          // 从Cookie中读取筛选条件
          var name = "foodFilter=";
          var decodedCookie = decodeURIComponent(document.cookie);
          var ca = decodedCookie.split(';');
          for (var i = 0; i < ca.length; i++) {
              var c = ca[i];
              while (c.charAt(0) == ' ') {
                  c = c.substring(1);
              }
              if (c.indexOf(name) == 0) {
                  return JSON.parse(c.substring(name.length, c.length));
              }
          }
          return null;
      }
    },
    beforeRouteUpdate(to, form, next) {
        var search = extend(this.search, to.query)
        if (search.page) {
            this.page = Math.floor(to.query.page)
            delete search.page
        }
        if (search.pagesize) {
            this.pagesize = Math.floor(to.query.pagesize)
            delete search.pagesize
        }
        this.loadList(1);
        next();
    },
    created() {
        var search = extend(this.search, this.$route.query)
        if (search.page) {
            this.page = Math.floor(this.$route.query.page)
            delete search.page
        }
        if (search.pagesize) {
            this.pagesize = Math.floor(this.$route.query.pagesize)
            delete search.pagesize
        }
        // 从Cookie中读取筛选条件
        var filter = this.getFilterFromCookie();
        if (filter) {
            this.search = extend(this.search, filter);
        }
        this.loadList(this.page);
    },
    mounted() {
    },
    destroyed() {
    }
}
</script>
